<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>

<div id="c1"></div>

<div id="c2"></div>


<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
// 1. 定义一个组件方法
//简单组件,没有状态state的组件
function Mycomponent(){
    return <h2>简单工厂函数组件</h2>
}

//复杂组件
class Myclasscomponet extends React.Component{

    render() {
        console.log(this)
        return <h2>复杂类组件</h2>
    }
}

// 2. 渲染组件
ReactDOM.render(<Mycomponent/>,document.getElementById("c1"))
ReactDOM.render(<Myclasscomponet/>,document.getElementById("c2"))

</script>
</body>
</html>